<template>
  <div class="sms_check">
    <van-form>
      <van-field v-model="phone" disabled>
        <!-- <template #left-icon>哦</template> -->
      </van-field>
      <van-field v-model="svCode" label="验证码">
        <template #button>
          <van-button
            size="mini"
            class="get_code"
            type="info"
            plain
            @click.stop="getSvcode"
            >{{ disCode ? count + "S" : "获取验证码" }}</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" @click="onSubmit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      phone: "手机号为您在学校预留的号码",
      svCode: "",
      disCode: false,
      count: 120,
      timer: null,
    };
  },
  destroyed(){
    clearInterval(this.timer)
    this.timer = null;
  },
  computed: {
    ...mapGetters(["schoolConfig", "userInfo"]),
  },
  methods: {
    onSubmit(val) {
      this.$emit('submit',{svCode:this.svCode,svMode:'PHONE_CODE'})
    },
    // 获取验证码
    getSvcode() {
      if (this.disCode) return;
      this.$toast.loading({ message: "加载中..." });
      this.$http({
        url: "/private-xm/electronicDocument/sendSvCode",
        method: "post",
        data: {
          schoolCode: 4000011111,
          //  this.schoolConfig.schoolCode,
          userId: this.userInfo.userId,
        },
      })
        .then((res) => {
          this.$toast.clear();
          this.$toast.success("操作成功");
          this.disCode = true;
          clearInterval(this.timer);
          this.timer = null;
          this.timer = setInterval(() => {
            --this.count;
            if (this.count <= 0) {
              clearInterval(this.timer);
              this.timer = null;
              this.disCode = false;
            }
          }, 1000);
        })
        .catch((error) => {
          this.$toast.clear();
          console.log(error, "error");
          this.$toast.fail(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.sms_check {
  padding: .08rem /* 3/37.5 */;
  .get_code {
    min-width: 1.866667rem /* 70/37.5 */;
  }
  .van-cell {
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    &:not(:last-child) {
      margin-bottom: .4rem /* 15/37.5 */;
    }
  }
}
</style>
